<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="header-search flex space-between">
			<div>
				<el-select v-model="state.apiData.search_task_id" placeholder="请选择任务" size="default" @change="searchChange" clearable filterable style="width:200px;margin-right: 20px;">
					<el-option v-for="(item, index) in state.taskList" :key="index" :label="item.name"
						:value="item.id"></el-option>
				</el-select>
								<el-input class="search-item" placeholder="请输入子任务名称" v-model="state.apiData.name" size="default"
					style="width: 220px;" clearable @change="searchChange()">
				</el-input>
				<el-button size="default" type="primary" @click="searchChange()" >查询</el-button>
				<el-button size="default" @click="reset()" >重置</el-button>
			</div>	
			<div>
			<el-button size="default" type="primary" @click="release()" v-if="state.isHide">发布子任务</el-button>
			<el-button size="default"  type="danger" @click="importFile()" v-if="state.isHide">导入数据</el-button>
			<el-button @click="backToPreviousPage">返回页面</el-button>
			</div>
		</div>

		<div class="page-main" v-loading="state.tableData.loading" ref="pageMain">
			<el-card shadow="hover" style="height:100%;">
				<el-button size="default" type="danger" @click="multipleExports"  style="margin-bottom: 10px;">导出文件</el-button>
				<el-table :scrollbar-always-on="true" border @selection-change="tableSelection" :row-key="(row) => row.id"  :data="state.tableData.data" style="width: 100%" :height="state.tableHeight"
					ref="multipleTableRef">
					<el-table-column type="selection" width="55" :reserve-selection="true" />
					<el-table-column label="序号" type="index" width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="taskPackageInfo.name"  width="200" label="任务名称" show-overflow-tooltip align="center">
						<template  #default="scope">
							<el-tag type='danger' effect="plain">{{scope.row.taskPackageInfo.name}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="taskPackageInfo.unit" width="200" label="单位名称" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="name" label="子任务名称" width="200" show-overflow-tooltip align="center">
						<template  #default="scope">
							<span  @click="details(scope.row.id)">{{scope.row.name}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="level" label="难度等级" width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="refer" label="参考信源" width="200" show-overflow-tooltip align="center">
						<template #default="scope">
							<el-link type="danger" v-if="checkUrl(scope.row.refer)"  :href="scope.row.refer" target ="_blank">点击查看</el-link>
							<span v-else>{{scope.row.refer}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="price" label="单价" width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="sort" label="优先级" width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="created_at" width="180" label="发布时间" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="receivedQuantity" width="200" label="领取进度" show-overflow-tooltip align="center">
						<template  #default="scope">
							<span style="color:#409EFF" v-if="scope.row.type==1">--</span>
							<span style="color:#409EFF" v-else>{{scope.row.receivedQuantity}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="完成进度" width="200" show-overflow-tooltip align="center">
						<template  #default="scope">
							<span style="color:#F56C6C" v-if="scope.row.type==1">--</span>
							<span style="color:#F56C6C" v-else>{{scope.row.collectsQuantity}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="380" fixed="right" align="center">
						<template #default="scope">
							<el-button size="small" type="primary" @click="details(scope.row.id)">查看详情</el-button>
							<el-button size="small"  @click="edit(scope.row.id)">修改子任务</el-button>
							<el-button size="small"  type="warning" @click="exportFile(scope.row.id)">导出数据</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="pagination-box">
					<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
						:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.apiData.page" background
						v-model:page-size="state.apiData.limit" layout="total, sizes, prev, pager, next, jumper"
						:total="state.tableData.total">
					</el-pagination>
				</div>
				<DetailDialog ref="DetailDialogRef" @refresh="getList()" />
				<AddDialog ref="AddDialogRef" @refresh="getList()" />
				<EditDialog ref="EditDialogRef" @refresh="getList()" />
				<ImporDialog ref="ImporDialogRef" @refresh="getList()" />
			</el-card>
		</div>
	</div>
</template>

<script setup name="taskPackage-list">
import { getCurrentInstance } from 'vue';
import { normApi } from '/@/api/norm/index';
import { taskPackageApi } from '/@/api/taskPackage/index';
import { excelFileApi } from '/@/api/excelFile/index';
import { ElMessageBox, ElMessage } from 'element-plus';

// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue')); 
const AddDialog = defineAsyncComponent(() => import('/@/views/norm/list/dialog.vue'));
const DetailDialog = defineAsyncComponent(() => import('/@/views/norm/list/details.vue'));
const EditDialog = defineAsyncComponent(() => import('/@/views/norm/list/edit.vue'));
const ImporDialog = defineAsyncComponent(() => import('/@/views/norm/list/impor.vue'));
const router = useRouter();

// 定义变量内容
const AddDialogRef = ref()
const DetailDialogRef = ref()
const EditDialogRef = ref()
const ImporDialogRef = ref()
const multipleTableRef = ref()

const state = reactive({
	apiData: {
		page: 1,
		limit: 10,
		name: '',
		task_id:'',
		search_task_id:'',
	},
	tableData: {
		data: [],
		loading: false,
		total: 0
	},
	tableHeight: '30vh',
	isHide:false,
	taskList:[],
	Ids:[],
});
// 获取任务列表
const getTaskList = () => {
	taskPackageApi().taskPackageList({page:-1,limit:-1}).then(res => {
    state.taskList = res.data
  })
}

// 页面加载时
onMounted(() => {
	// getDepatment()
	if(router.currentRoute.value.query.task_id){
		state.apiData.task_id = router.currentRoute.value.query.task_id
		state.isHide = true // 如果有任务ID才允许发布
	}
	getList()
	getTaskList()
	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 80 - 52 + "px";
});

const searchChange = () => {
	state.apiData.page = 1
	getList()
}

// 分页改变
const onHandleSizeChange = (val) => {
	state.apiData.limit = val;
	getList();
};
const onHandleCurrentChange = (val) => {
	state.apiData.page = val;
	getList();
};

//校验链接
const checkUrl = (vlaue) =>{
	if (/^https?:\/\//.test(vlaue)) {
		return true;
	} else {
		return false;
	}
}
/**
 * 重置按钮
 */
 const reset = () => {
	state.apiData.page = 1
	state.apiData.name = '';
	state.apiData.search_task_id = '';
	getList()
}

// 获取列表
const getList = () => {
	state.tableData.loading = true
	normApi().normList(state.apiData).then(res => {
		state.tableData.loading = false
		state.tableData.data = res.data.data
		state.tableData.total = res.data.total
	}).catch(() => {
		state.tableData.loading = false
	})

}

const tableSelection = (val) => {
	if(val){
		state.Ids = [];
		val.forEach(item => {
			state.Ids.push(item.id);
		});
	}
	console.log(state.Ids)
}

/**
 * 返回上一级页面
 */
const backToPreviousPage = () => {
	// this.$router.push('/target')
	router.go(-1);
}

// 发布指标弹窗
const release= () => {
	AddDialogRef.value.openDialog();
}

// 详情弹窗
const details= (norm_id) => {
	DetailDialogRef.value.openDialog(norm_id);
}

// 编辑弹窗
const edit= (norm_id) => {
	EditDialogRef.value.openDialog(norm_id);
}

// 导入数据窗口
const importFile= () => {
	ImporDialogRef.value.openDialog(state.apiData.task_id);
}

// 导出文件
const exportFile= (id) => {
	let query = {id:id}
	excelFileApi().normExportFile(query).then(res => {
		if(res.data){
			let url = res.data;
			const iframe = document.createElement('iframe'); // 创建一个HTML 元素
			iframe.style.display = 'none'; // 隐藏iframe 防止影响页面      
			iframe.style.height = 0; // 高度设置0 防止影响页面      
			iframe.src = url;// 下载链接       
			document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求      // 5分钟之后删除
			setTimeout(() => { iframe.remove(); }, 5 * 60 * 1000);
			ElMessage.success('导出成功,请点击下载列表查看!');
		}else{
			ElMessage.error('导出失败!');
		}
	 
	}).catch(() => {
	})
}
// 多选导出文件
const multipleExports= () => {
	excelFileApi().multipleExportFile({ids:state.Ids}).then(res => {
		if(res.data){
			let url = res.data;
			const iframe = document.createElement('iframe'); // 创建一个HTML 元素
			iframe.style.display = 'none'; // 隐藏iframe 防止影响页面      
			iframe.style.height = 0; // 高度设置0 防止影响页面      
			iframe.src = url;// 下载链接       
			document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求      // 5分钟之后删除
			setTimeout(() => { iframe.remove(); }, 5 * 60 * 1000);
			ElMessage.success('导出成功,请点击下载列表查看!');
		}else{
			ElMessage.error('导出失败!');
		}
		multipleTableRef.value.clearSelection();
		getList();
	}).catch(() => {
		getList();
	})
}
</script>

<style lang="scss" scoped>
.page-main {
	height: calc(100vh - 50px - 106px);
}
</style>
